{% extends "projects/base_project.html" %}
{% load i18n %}
{% load privacy_tags %}
{% load core_tags %}
{% load static %}

{% block title %}
Tools
{% endblock title %}

{% block project_editing %}
  {% with tools_active="active" %}
    {% include "core/project_bar.html" %}
  {% endwith %}
{% endblock %}


{% block extra_scripts %}
  <script type="text/javascript" src="{% static 'vendor/knockout.js' %}"></script>
  <script type="text/javascript" src="{% static 'projects/js/tools.js' %}"></script>
  <script type="text/javascript">
var project_tools = require('projects/tools');
$(document).ready(function () {
    project_tools.init_embed({
        api_host: '{{ settings.PUBLIC_API_URL }}',
        uri: '{{ settings.URI }}',
        project: '{{ project.slug }}'
    });
});
  </script>
{% endblock %}


{% block content %}
  <div class="navigable">
    <ul>
      <li class="active">
        <a href="{% url 'project_embed' project.slug %}">Embed</a>
      </li>
    </ul>

    <div id='tool-embed'>

      <h2>
        <span class="link-help">
          (<a href="/" data-bind="click: show_help, clickBubble: false">Help</a>)
        </span>
        {% trans "Embed API" %}
      </h2>

      <p>
        {% trans "Embed content into any site on the internet dynamically." %}
      </p>

      <label for="file">{% trans "File" %}</label>
      <select id="file" data-bind="value: file">
        <option value="">{% trans "Select a File" %}</option>
        {% for file in files %}
          <option value="{{ file.path|cut:".html" }}">{{ file.path }}</option>
        {% endfor %}
      </select>

      <div data-bind="visible: has_sections">
        <label for="section">{% trans "Section" %}</label>
        <select id="section" data-bind="enable: has_sections, options: sections, value: section, optionsCaption: 'Choose a Section', optionsText: 'title', optionsValue: 'id'"></select>
      </div>

      <p class="info" data-bind="text: help, visible: help != null"></p>
      <p class="error" data-bind="text: error, visible: error != null"></p>

      <div data-bind="visible: has_section">
        <button data-bind="click: show_embed, clickBubble: false">{% trans "Show content" %}</button>

        <label>{% trans "Example Usage" %}</label>
        <pre data-bind="text: api_example">
        </pre>
      </div>

    </div>
  </div>
{% endblock %}
